-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add displayArrayKey Option for Rendering Array Keys in JSONViewer #19
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
package-lock.json
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Project use pnpm as default for the workspace
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
package-lock file will confuse Vercel deployment.
src/components/json-node.tsx
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We just need to use displayArrayKey
in NameValue component. Changes here are needless.
src/components/name-key.tsx
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure why the new component was created here. We could just change a little code in the NameValue component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I’ve separated the code into a distinct component for clarity and readability. Integrating it with the original component could lead to clutter. However, I can relocate this new key component to the name-value file for a more concise separation of code. Would that arrangement be more suitable for you?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The important point is to use the displayArrayKey from useContext instead of props. Also, the conditional operator is enough.
src/components/object-node.tsx
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Again, attribute passing should not happen except for depth and props with a parent relationship.
I noticed the new comma added and had a thought: why do we add the prop viewMode: viewer or json? Which means json mode has the comma symbol, but the viewer mode not. |
That sounds like a good idea, I'll implement the comments! |
I started changing right now, do you think with the view mode 'viewer' or 'json' - do we need the displayArrayKey option at all? |
Sorry, I am on vacation. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The viewMode property seems a bit wasteful as it is only used to determine whether to display commas.😆
Let me think twice...🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The formatting here is not that friendly.😅
Greetings,
I have implemented a new feature in the JSONViewer, introducing an option named displayArrayKey. This feature aims to enhance the user experience by providing additional flexibility in visualizing JSON data.
Feature: 'displayArrayKey' Option
The displayArrayKey option, when set to false, prevents the rendering of the keys of an array and appends a colon to the end of the line. This results in a cleaner and more concise output for users who find array keys unnecessary in certain contexts.
Usage:
Enabled (without keys):
Disabled (with keys):
Use Case:
This addition is beneficial for developers seeking a streamlined representation of JSON data, especially when handling large arrays where the keys might not contribute significantly to comprehending the data structure.
Documentation:
The documentation has been updated to encompass the new displayArrayKey option, elucidating its function and effect on the JSON data representation.
Conclusion:
I am confident that this feature will serve as a valuable enhancement to the project by offering more versatility in displaying JSON data. I look forward to your feedback and am open to making any necessary modifications.
Thank you for considering this contribution. Looking forward to a positive review and eventual merge.
Best Regards,
Nicholas